<template>
    <el-form :model="activity">
        <!-- 使用Row和Col实现三个表单项横向均匀分布 -->
        <el-row :gutter="24">
            <el-col :span="4">
                <el-form-item label="负责人">
                    <el-select v-model="activity.ownerId" placeholder="请选择负责人" @click="loadOwner">
                        <el-option
                            v-for="item in ownerOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            clearable/>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="活动名称">
                    <el-input v-model="activity.name" placeholder="请输入活动名称" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="活动时间">
                    <el-date-picker
                        v-model="activity.activityTime"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY-MM-DD HH:mm:ss"
                        data-format="YYYY-MM-DD"
                        time-format="HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        clearable>
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="活动预算">
                    <el-input v-model="activity.cost" placeholder="请输入活动预算" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="创建时间" style="width: 100%;">
                    <el-date-picker
                        v-model="activity.createTime"
                        type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择创建时间"
                        class="datetime-picker"
                        style="width: 100%;"
                        clearable>
                    </el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <div class="button-group1">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button type="primary" plain @click="onReset">重置</el-button>
        </div>
    </el-form>

    <div class="button-group2">
        <el-button type="primary" @click="addActivity()">新增活动</el-button>
        <el-button type="danger" @click="delActivities()">批量删除</el-button>
    </div>

    <el-table :data="activityPageInfo.list" style="width: 100%;" @selectionChange="selectId">
        <el-table-column type="selection" width="50px"/>
        <el-table-column type="index" label="序号" width="55px"/>
        <el-table-column label="负责人" property="ownerByDo.name"/>
        <el-table-column label="活动名称" property="name"/>
        <el-table-column label="开始时间" property="startTime"/>
        <el-table-column label="结束时间" property="endTime"/>
        <el-table-column label="活动预算" property="cost"/>
        <el-table-column label="创建时间" property="createTime"/>

        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="success" :icon="Message" circle @click="view(scope.row.id)"/>
                <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)"/>
                <el-button type="danger" :icon="Delete" circle @click="deleteActivity(scope.row.id)"/>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        background layout="prev, pager, next,jumper,total"
        :total="activityPageInfo.total"
        :page-size="activityPageInfo.pageSize"
        @change="toPage"/>
</template>

<script setup>
import {Delete, Edit, Message} from '@element-plus/icons-vue'
import {inject, onMounted, ref} from 'vue'
import {doDelete, doGet} from '../http/httpRequest'
import {confirmMessage, showMessage} from '../util/message'
import {router} from "@/router/router.js";
import axios from "axios";

// 活动数据对象
// 存储单个活动的详细信息，初始时为负责人对象(ownerByDo)提供空对象默认值
let activity = ref({
    ownerByDo: {}  // 负责人信息对象
})

// 负责人下拉选项数据
// 存储所有可选负责人的列表，初始化为包含一个空对象的数组
let ownerOptions = ref([{}])

// 活动列表分页信息
// 存储活动列表的分页数据，包括当前页、总页数、活动列表等信息
let activityPageInfo = ref({})

// 刷新函数
// 用于刷新活动列表数据，确保数据与后端同步
let flush = inject('flush')

// 选中的活动ID列表
// 用于存储在活动列表中选中的活动ID，用于批量操作
let selectActivities = []

// 组件挂载完成后执行的初始化操作
// 当组件成功挂载到DOM后，立即调用loadActivityList方法加载第一页活动数据
onMounted(() => {
    loadActivityList(1);
})

/**
 * 加载负责人列表
 * 调用API获取所有负责人信息并更新下拉选项数据
 */
const loadOwner = () => {
    // 调用GET接口获取负责人列表，参数为空对象
    doGet('/api/owners', {}).then(resp => {
        if (resp.data.code == 200) {
            // 接口调用成功，更新负责人下拉选项数据
            ownerOptions.value = resp.data.info;
        } else {
            // 接口调用失败，显示错误信息
            showMessage(resp.data.msg, 'error')
        }
    })
}

const onSearch = () => {
    loadActivityList(1);
}

/**
 * 加载活动列表数据
 * @param {number} current - 当前页码
 * 调用API获取指定页码的活动列表数据并更新分页信息
 */
const loadActivityList = current => {
    let activityTime = activity.value.activityTime;
    let timeArray = [];
    for (let index in activityTime) {
        timeArray.push(activityTime[index]);
    }

    // 调用GET接口获取活动列表，传入当前页码参数
    doGet('/api/activities', {
        current: current,
        ownerId: activity.value.ownerId,
        activityName: activity.value.name,
        startTime: timeArray[0],
        endTime: timeArray[1],
        cost: activity.value.cost,
        createTime: activity.value.createTime,
    }).then(resp => {
        if (resp.data.code == 200) {
            // 接口调用成功，更新活动列表分页信息
            activityPageInfo.value = resp.data.info;
        } else {
            // 接口调用失败，显示错误信息
            showMessage(resp.data.msg, 'error')
        }
    })
}

/**
 * 页码切换处理函数
 * @param {number} current - 目标页码
 * 当用户切换页码时调用，加载指定页码的活动列表数据
 */
const toPage = current => {
    loadActivityList(current);
}

/**
 * 查看活动详情
 * @param {number} id - 活动ID
 * 跳转到指定ID的活动详情页面
 */
const view = id => {
    router.push('/dashboard/activity/' + id);
}

/**
 * 编辑活动
 * @param {number} id - 活动ID
 * 跳转到指定ID的活动编辑页面
 */
const edit = id => {
    router.push('/dashboard/activity/edit/' + id);
}

/**
 * 新增活动
 * 跳转到新增活动页面
 */
const addActivity = () => {
    router.push('/dashboard/activity/add');
}

/**
 * 单个活动删除功能
 * @param {number} id - 要删除的活动ID
 * 功能流程：
 * 1. 显示确认对话框获取用户确认
 * 2. 调用DELETE API执行删除操作
 * 3. 根据接口响应显示成功/失败提示
 * 4. 删除成功后刷新当前页面数据
 */
const deleteActivity = id => {
    // 显示删除确认对话框，'warning'类型会显示黄色警告图标
    confirmMessage('确定删除?', 'warning').then(resp => {
        // 用户确认后调用删除API，拼接活动ID到URL
        doDelete('/api/activity/' + id).then(resp => {
            if (resp.data.code == 200) {
                showMessage('删除成功', 'success'); // 显示绿色成功提示
                flush(); // 调用注入的刷新函数，重新加载活动列表
            } else {
                showMessage(resp.data.msg, 'error'); // 显示红色错误提示，内容为后端返回的错误信息
            }
        }).catch(() => {
            // 捕获API调用异常（如网络错误），此处留空表示不做额外处理
        })
    })
}

/**
 * 处理表格选中项变化
 * @param {Array} item - 选中的活动对象数组
 * 功能：将选中项的ID收集到selectActivities数组，用于批量删除
 */
const selectId = item => {
    selectActivities = []; // 清空现有选中ID数组
    // 遍历选中项数组，提取每个活动的ID并添加到selectActivities
    for (let index in item) {
        selectActivities.push(item[index].id);
    }
}

/**
 * 批量删除活动功能
 * 功能流程：
 * 1. 检查是否有选中项，无选中项时显示警告提示
 * 2. 显示确认对话框获取用户确认
 * 3. 将选中ID数组转换为逗号分隔的字符串
 * 4. 调用批量删除API执行删除操作
 * 5. 根据接口响应显示成功/失败提示并刷新数据
 */
const delActivities = () => {
    // 检查是否有选中项，无选中项时显示警告并终止执行
    if (selectActivities.length == 0) {
        showMessage('请选择要删除的活动', 'warning'); // 显示黄色警告提示
        return;
    } else {
        // 显示批量删除确认对话框
        confirmMessage('确定删除选中的活动?', 'warning').then(resp => {
            // 将选中ID数组转换为逗号分隔的字符串，适应后端接口要求
            let ids = selectActivities.join(',');
            // 调用批量删除API，参数为ID字符串
            doDelete('api/activities', {
                ids: ids // 后端期望的参数格式：{ids: "1,2,3"}
            }).then(resp => {
                if (resp.data.code == 200) {
                    showMessage(resp.data.msg, 'success'); // 显示成功提示
                    flush(); // 刷新活动列表数据
                } else {
                    showMessage(resp.data.msg, 'error'); // 显示错误提示
                }
            })
        })
    }
}
</script>

<style scoped>
.datetime-picker {
    display: flex;
    width: 100% !important; /* 强制占满父容器宽度 */
    padding: 0;
    flex-wrap: wrap;
    box-sizing: border-box; /* 确保内边距不会增加总宽度 */
}

.button-group1 {
    display: flex;
    justify-content: flex-end;
}

.button-group2 {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.el-table {
    margin-top: 20px;
}
</style>